import "./index.scss";
import { Setting } from "../svg/svg";
import { Card } from "../card/card";
import { List } from "../list/list";
import { useEffect, useState } from "react";
import classNames from "classnames";
import { Table } from "../table/table";
import { THead } from "../table/thead";
// import { TBody } from "../table/tbody";
import { Tr } from "../table/tr";
import { Td } from "../table/td";
import { DataEcharts } from "@/components/echarts/DataEcharts";
import { RightTable } from "./rightTable/rightTable";
import { Outlet, useLocation, useNavigate } from "react-router";
import { IntervalDayjs } from "./intervalDayjs/intervalDayjs";
interface NavListType {
  name: string;
  link: string;
}
const Index = (): React.ReactElement => {
  // 侧边栏数据
  const navList: NavListType[] = [
    { name: "TK账号管理", link: "/dashboard/batch" },
    { name: "接码账号登录", link: "/dashboard/phone_verify" },
    { name: "视频点赞采集", link: "/dashboard/video_like" },
    { name: "粉丝采集", link: "/dashboard/fans_collection" },
    { name: "一键分发视频", link: "/dashboard/video_istribution" },
  ];
  const navigate = useNavigate();

  const location = useLocation();

  useEffect(() => {
    // 根据路由动态控制isActive
    if (location.pathname !== "/dashboard`") {
      navList.forEach((item, index) => {
        if (item.link === location.pathname) {
          setIsActive(index);
          setIsShow(true);
        }
      });
    }
    if (location.pathname == "/dashboard") {
      setIsActive(-1);
      setIsShow(false);
    }
  }, []);

  // const [statisticsData, setStatisticsData] = useState<Statistics>();

  const infoList = [
    { name: "数据库数量", data: 3, unit: "个" },
    { name: "总收益", data: 6980, unit: "个" },
    { name: "开箱总数", data: 10689, unit: "个" },
    { name: "平均收益", data: 0.89, unit: "个" },
    { name: "预估收益(0.06/个)", data: 219.3, unit: "$" },
  ];

  const statistics = [
    { name: "运行至今总收益", data: 185690, unit: "个" },
    { name: "开箱总数", data: 582166, unit: "次" },
    { name: "平均收益", data: 0.63, unit: "个" },
    { name: "运行至今总收益(0.63/个)", data: 21010.63, unit: "$" },
  ];
  //   是否显示侧边栏
  const [isShow, setIsShow] = useState<boolean>(false);
  //   侧边栏列表的active类
  const [isActive, setIsActive] = useState<number>(-1);

  const dashBoardClass = (): string => {
    return classNames(
      "dashboard_nav",
      isShow ? "is_show" : "",
      isActive >= 0 && "clear_z_index"
    );
  };

  const itemClass = (index: number): string => {
    return classNames("dashboard_item", isActive === index ? "active" : "");
  };

  // 动态设置侧边栏父盒子属性
  const sideBarClassName = (): string => {
    return classNames("dashboard_sidebar", isActive >= 0 && "active");
  };

  return (
    <>
      <div className="dashboard_index_box">
        {/* 侧边栏 */}
        <div className={sideBarClassName()}>
          <Card className={dashBoardClass()} radiusPostion="right">
            <List className="dashboard_list">
              <>
                {navList.map((item, index) => (
                  <List.Item
                    key={index}
                    className={itemClass(index)}
                    onClick={() => [setIsActive(index), navigate(item.link)]}
                  >
                    {item.name}
                  </List.Item>
                ))}
                {isActive >= 0 && (
                  <List.Item
                    className={itemClass(999)}
                    onClick={() => [
                      setIsActive(-1),
                      navigate("/dashboard"),
                      setIsShow(false),
                    ]}
                  >
                    回到首页
                  </List.Item>
                )}
              </>
            </List>
          </Card>
          {isActive >= 0 && (
            <div className="dashboard_output">
              <Outlet />
            </div>
          )}
        </div>
        {/* 头部setting */}
        {isActive == -1 && (
          <>
            <div className="dashboard_svg_box">
              <div className="svg_item" onClick={() => setIsShow(!isShow)}>
                <Setting />
              </div>
            </div>

            {/* 标题 */}
            <div className="dashboard_title">
              <div className="dashboard_day">
                <p>
                  稳定运行时长<span className="day_main">00999</span>天
                </p>
              </div>
              <div className="dashboard_main">
                <h3>运营数据</h3>
              </div>
              <div className="dashboard_time">
                <span>{<IntervalDayjs />}</span>
              </div>
            </div>

            {/* 账号大体数据 */}
            <div className="dashboard_info">
              {infoList.map((item, index) => (
                <Card className="dashboard_info_list" key={index}>
                  <div className="dashboard_info_item_title">{item.name}</div>
                  <div className="dashboard_info_child">
                    <span>{item.data}</span>
                    <span className="dashboard_info_unit">{item.unit}</span>
                  </div>
                </Card>
              ))}
            </div>

            {/* 列表与可视化渲染 */}
            <div className="dashboard_table_info">
              {/* 左侧数据 */}
              <Card className="dashboard_left_table">
                <div className="dashboard_table_title_box">
                  <div className="dashboard_left_border"></div>
                  <div className="dashboard_table_title">各数据库收益统计</div>
                </div>
                <Table>
                  <THead>
                    <Tr color="#291895">
                      <Td>序列号</Td>
                      <Td>收益</Td>
                      <Td>开箱次数</Td>
                      <Td>平均收益</Td>
                      <Td>账号数</Td>
                      <Td>设备数</Td>
                    </Tr>
                  </THead>
                  {/* <TBody>
                    {indexTable &&
                      indexTable.map((item: IndexTable, index: number) => (
                        <Tr
                          key={index}
                          color={index % 2 === 0 ? "#311382" : "#291895"}
                        >
                          <Td>{item.serial}</Td>
                          <Td>{item.income}</Td>
                          <Td>{item.crate_num}</Td>
                          <Td>{(item.income / item.crate_num).toFixed(2)}</Td>
                          <Td>{item.account_num}</Td>
                          <Td>{item.device_num}</Td>
                        </Tr>
                      ))}
                  </TBody> */}
                </Table>
              </Card>

              {/* 中间侧以及数据统计 */}

              <div className="dashboard_middle_table">
                <Card className="dashboard_middle_top">
                  {statistics.map((item, index) => (
                    <div className="middle_top_item" key={index}>
                      <div className="dashboard_info_item_title">
                        {item.name}
                      </div>
                      <div className="dashboard_info_child">
                        <span>{item.data}</span>
                        <span className="dashboard_info_unit">{item.unit}</span>
                      </div>
                    </div>
                  ))}
                </Card>

                <div className="dashboard_middle_middle">
                  <div className="dashboard_middle_middle_box">
                    <p className="title">
                      本月收益<span>月</span>
                    </p>
                    <p className="dashboard_sum">
                      {/* {statisticsData?.month} */}
                      <span>个</span>
                    </p>
                  </div>
                  <div className="dashboard_middle_middle_box">
                    <p className="title">
                      本周收益<span>周</span>
                    </p>
                    <p className="dashboard_sum">
                      {/* {statisticsData?.week} */}
                      <span>个</span>
                    </p>
                  </div>
                </div>
                <Card className="dashboard_middle_bottom">
                  <div className="dashboard_border">
                    <div className="dashboard_border_right" />
                    <p>近七日总收益</p>
                  </div>
                  <DataEcharts />
                </Card>
              </div>
              <div className="dashboard_right_table">
                <RightTable />
              </div>
            </div>
          </>
        )}
      </div>
    </>
  );
};
export default Index;
